<template>
	<div class="swiper tabs-swiper">
		<ol class="tabs swiper-wrapper">
			<li v-for='item in list2' :key="item.id" class="swiper-slide">
				<router-link to="/">
					<img :src="item.url"/>
					<p>{{item.name}}</p>
				</router-link>
			</li>
		</ol>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {onMounted} from 'vue'
	//2.引入swiper动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	export default{
		name:"Tabs",
		data(){
			return {
				list2:[
					{id:1,name:'攻略',url:require('@/assets/img/1.png')},
					{id:2,name:'风情民宿',url:require('@/assets/img/2.png')},
					{id:3,name:'景点导航',url:require('@/assets/img/3.png')},
					{id:4,name:'收藏',url:require('@/assets/img/4.png')},
					{id:5,name:'旅游费',url:require('@/assets/img/5_10.png')},
					{id:6,name:'购物',url:require('@/assets/img/6.png')},
					{id:7,name:'景点打卡',url:require('@/assets/img/7.png')},
					{id:8,name:'美食',url:require('@/assets/img/8.png')},
					{id:9,name:'猫眼影院',url:require('@/assets/img/9.png')},
					{id:10,name:'旅游贷',url:require('@/assets/img/10.png')},
				]
			}
		},
		setup(){
			onMounted(	()=>{
				new Swiper('.tabs-swiper',{
					slidesPerView:4
				})
			})
		}
	}
</script>

<style>
	a{
		text-decoration: none;
		color: black;
	}
	.tabs li{
		width: 20%;
		text-align: center;
	}
	.tabs li img{
		height: 0.8rem;
		width:  0.8rem;
	}
	.tabs li p{
		padding: 0.2rem 0;
	}
	.tabs{
		padding: 0.3rem 0;
		display: flex;
		align-items: center;
	}
</style>
